<template>
    <div class="py-20px">
        <n-alert title="" type="info" :show-icon="false">
            <div class="flex items-center">
                <span>请点击</span>
                <jb-btn
                    class="ml-2 mr-2"
                    :icon="Icons.DOWNLOAD"
                    type="primary"
                    size="small"
                    url="/api/admin/demoTable/downloadTpl"
                    :download="true"
                    file-name="模板.xls"
                    >下载</jb-btn
                >
                <span>按钮，下载Excel导入模板，填写数据后，上传并导入</span>
            </div>
        </n-alert>
        <div class="flex justify-center mt-10">
            <jb-btn
                icon="ic:baseline-cloud-upload"
                type="primary"
                :upload="true"
                upload-accept=".xls, .xlsx, .csv"
                url="/api/admin/demoTable/importExcel"
                @upload-complete="handleUploadComplete"
                >上传 & 导入</jb-btn
            >
        </div>
    </div>
</template>

<script setup lang="ts">
import { inject, reactive } from 'vue'
import { Icons } from '@/constants'

const form = reactive({
    url: ''
})

const closeModal = inject('closeModal')
const currentPage = inject('currentPage')

function handleUploadComplete(data) {
    if (data.result) {
        closeModal()
        currentPage.exposed.loadData()
    }
}
</script>

<style scoped></style>
